<template>
  <div class="base-table">
    <div class="table-content">
      <el-table
        ref="table"
        :data="tableData"
        :header-cell-style="{
          background: '#e6e8ec',
          color: '#000',
          height: '60px',
        }"
        height="100%"
        border
        :stripe="stripe"
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-if="showSelection"
          type="selection"
          align="center"
          width="55"
        >
        </el-table-column>
        <el-table-column
          v-if="showSort"
          label="序号"
          align="center"
          type="index"
          width="50"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column
          v-for="(col, index) in columns"
          :prop="col.prop"
          :key="'bs_' + index"
          :label="col.label"
          :width="col.width"
          :min-width="col.minWidth || '0'"
          :align="col.align || 'center'"
          :fixed="col.fixed"
        >
        </el-table-column>
        <el-table-column
          v-if="operate.show"
          label="操作"
          align="center"
          :width="operate.width || 150"
          fixed="right"
        >
          <template slot="header">
            <slot name="operate-title">
              <span>操作</span>
            </slot>
          </template>
          <template slot-scope="scope">
            <slot name="operate" :current="scope"></slot>
          </template>
        </el-table-column>
        <slot></slot>
      </el-table>
    </div>
    <div v-if="pages.show" class="pagination-wrapper">
      <pagination
        :total="pages.count"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="handlePage"
      ></pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "./Pagination.vue";
export default {
  components: { Pagination },
  props: {
    showSelection: {
      type: Boolean,
      default: false,
    },
    showSort: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      defaults: [],
    },
    columns: {
      type: Array,
      defaults: [],
    },
    loading: {
      type: Boolean,
      defaults: false,
    },
    operate: {
      type: Object,
      default: () => ({ show: false, width: 150 }),
    },
    pages: {
      type: Object,
      default: () => ({ show: false, count: 0 }),
    },
      stripe:{
          type:Boolean,
          default:true
      }
  },
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 20,
      },
    };
  },
  methods: {
    handlePage(val) {
      this.page.pageNum = val.page;
      this.page.pageSize = val.limit;
      this.$emit("pagination", this.page);

      // 切换分页时 定位滚动条位置
      this.$nextTick(() => {
        this.$refs.table.bodyWrapper.scrollTop = 0;
      });
    },
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
    handleSelectionChange(val) {
      this.$emit("selection-change", val);
    },
  },
  watch: {
    tableData() {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
  },
};
</script>

<style scoped>
.base-table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.table-content {
  height: calc(100% - 60px);
}
.pagination-wrapper {
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
</style>
